<template>
  <div class="myAddress">
    <!-- 头部 -->
    <van-nav-bar title="我的地址" left-text="返回" :fixed="true" left-arrow @click-left="onClickLeft" />

    <van-address-list
      style="margin-top:4rem"
      v-model="chosenAddressId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"
      @select="onBackAddress"
      :contact-info="editingContact"
      :is-edit="isEdit"
    />
    <transition name="router-slider" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>


<script>
import { Toast } from "vant";
import { getUserAddress } from "./../../../service/api/index";
import { mapState } from "vuex";
import PubSub from "pubsub-js";

export default {
  name: "myAddress",

  data() {
    return {
      chosenAddressId: "1",
      showEdit: false,
      isEdit: false,
      editingContact: {},

      list: [
        /*
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室"
        },
        
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号"
        }
        */
      ]
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    currentContact() {
      const id = this.chosenContactId;
      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
    }
  },
  mounted() {
    this.initUserAddress();
    // 订阅添加地址成功
    PubSub.subscribe("backToMyaddress", msg => {
      if (msg === "backToMyaddress") {
        this.initUserAddress();
      }
    });
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onAdd() {
      // Toast('新增地址');
      this.$router.push({ path: "/confirmOrder/myAddress/addAddress" });
    },

    onEdit(item, index) {
      // Toast('编辑地址:' + index);
      // console.log(item);

      this.$router.push({
        path:
          "/confirmOrder/myAddress/editAddress?address_id=" + item.address_id
      });
      this.isEdit = true;
      this.showEdit = true;
      this.editingContact = item;
    },
    // 获取当前用户的地址
    async initUserAddress() {
      if (this.userInfo.token) {
        // 登录状态
        let result = await getUserAddress(this.userInfo.token);
        // console.log(result);
        //解析添加的地址到页面
        if (result.success_code === 200) {
          // console.log(result.data);

          let addressArr = result.data;
          this.list = [];
          addressArr.forEach((address, index) => {
            let addressObj = {
              id: String(index + 1),
              name: address.address_name,
              tel: address.address_phone,
              address: address.address_area + address.address_area_detail,
              address_id: address._id,
              user_id: address.user_id
            };
            //追加到数组
            this.list.push(addressObj);
          });
        } else {
          Toast({
            message: "获取地址失败!",
            duration: 500
          });
        }
      } else {
        Toast({
          message: "登录已过期,请重新登录",
          duration: 500
        });
      }
    },

    onBackAddress(item, index) {
      // console.log(item, index);
      if (item) {
        //  发布地址数据
        PubSub.publish("userAddress", item);
        // 返回上级界面
        this.$router.back();
      }
    }
  },

  beforeDestroy() {
    PubSub.unsubscribe("backToMyaddress");
  }
};
</script>


<style lang="less" scoped>
.myAddress {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f5f5f5;
}

// 转场动画
.router-slider-enter-active,
.router-slider-leave-active {
  transition: all 0.2s;
}

.router-slider-enter,
.router-slider-leave-active {
  transform: translate3d(2rem, 2rem, 0);
  opacity: 0;
}
</style>